<template>
  <div class="main">
    <el-container>
      <el-main>
        <div class="video-display">
          <span class="text">{{ video.videoTitle }}</span>

          <div>
            <div class="subtitle">
              <div class="left">
                <svg
                  t="1652884979406"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2812"
                  width="32"
                  height="32"
                >
                  <path
                    d="M896 160v704H128V160h768z m-64 64H192v576h640V224z m-416 132.192L672 512l-256 155.808V356.16z"
                    fill="#bfbfbf"
                    p-id="2813"
                  ></path>
                </svg>
                <span class="text">{{ video.playNumber }}</span>
              </div>

              <div class="right">
                <svg
                  t="1652885151314"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3831"
                  width="32"
                  height="32"
                >
                  <path
                    d="M554.666667 537.6l115.2 115.2-29.866667 29.866667-128-128V341.333333h42.666667v196.266667z m-21.333334 358.4C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z"
                    fill="#bfbfbf"
                    p-id="3832"
                  ></path>
                </svg>
                <span class="text">{{ dateFormat(video.gmtCreate) }}</span>
              </div>
            </div>
          </div>
          <vue3VideoPlay
            :loop="video.loop"
            :preload="video.preload"
            :width="video.width"
            :height="video.height"
            :src="video.videoUrl"
            :title="video.videoTitle"
            :poster="video.coverUrl"
          />
        </div>

        <div class="video-item">
          <div class="icon" @click="like">
            <el-tooltip content="点赞数" placement="bottom" effect="light">
              <span v-if="!isLike"
                ><span style="cursor: pointer">
                  <svg
                    t="1652509994653"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2504"
                    width="30px"
                    height="30px"
                  >
                    <path
                      d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
                      p-id="2505"
                    ></path>
                  </svg>
                </span>
              </span>

              <span v-else>
                <span style="cursor: pointer">
                  <svg
                    t="1652509864586"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1965"
                    width="30px"
                    height="30px"
                  >
                    <path
                      d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
                      p-id="1966"
                      fill="#1296db"
                    ></path>
                  </svg>
                </span>
              </span>
            </el-tooltip>
            <span :class="{ 'check-video': isLike === true }">{{
              video.likeNumber
            }}</span>
          </div>

          <div class="icon" @click="collect">
            <el-tooltip content="收藏数" placement="bottom" effect="light">
              <span v-if="!isCollect">
                <span style="cursor: pointer">
                  <svg
                    t="1652946524342"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3209"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M248.482281 938.000324c-4.306072 0-8.592702-1.336438-12.211113-3.967358-6.395664-4.646833-9.600659-12.521175-8.264221-20.314675l48.430012-282.363949L71.288626 431.382914c-5.66093-5.519714-7.698333-13.772678-5.255701-21.291932 2.444679-7.519254 8.943696-13.000082 16.768919-14.137998l283.508006-41.195238L493.099535 97.853655c3.498684-7.089465 10.720156-11.577686 18.627243-11.577686 7.907087 0 15.127536 4.489244 18.627243 11.577686l126.788661 256.904091 283.510052 41.195238c7.823176 1.137916 14.322194 6.618744 16.766872 14.137998 2.442632 7.519254 0.405229 15.773242-5.255701 21.291932L747.012502 631.354342l48.430012 282.363949c1.336438 7.7935-1.868557 15.667841-8.264221 20.314675-6.399757 4.646833-14.878872 5.257747-21.874193 1.582031L511.726777 802.298666 258.146385 935.614997C255.107165 937.211355 251.789607 938.000324 248.482281 938.000324zM130.422422 431.011454 313.25654 609.228415c4.894474 4.7727 7.128351 11.647271 5.974062 18.385742l-43.163055 251.64532 225.994104-118.811989c6.048763-3.180436 13.282514-3.180436 19.331277 0l225.992057 118.811989-43.163055-251.64532c-1.154289-6.738471 1.079588-13.613042 5.974062-18.385742l182.833095-178.216961-252.665557-36.71418c-6.767124-0.983397-12.614296-5.233188-15.641235-11.362792L511.726777 153.97893 398.729214 382.934482c-3.025916 6.129604-8.874111 10.379395-15.639189 11.362792L130.422422 431.011454z"
                      p-id="3210"
                    ></path>
                  </svg>
                </span>
              </span>

              <span v-else>
                <span style="cursor: pointer">
                  <svg
                    t="1652946524342"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3209"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M248.482281 938.000324c-4.306072 0-8.592702-1.336438-12.211113-3.967358-6.395664-4.646833-9.600659-12.521175-8.264221-20.314675l48.430012-282.363949L71.288626 431.382914c-5.66093-5.519714-7.698333-13.772678-5.255701-21.291932 2.444679-7.519254 8.943696-13.000082 16.768919-14.137998l283.508006-41.195238L493.099535 97.853655c3.498684-7.089465 10.720156-11.577686 18.627243-11.577686 7.907087 0 15.127536 4.489244 18.627243 11.577686l126.788661 256.904091 283.510052 41.195238c7.823176 1.137916 14.322194 6.618744 16.766872 14.137998 2.442632 7.519254 0.405229 15.773242-5.255701 21.291932L747.012502 631.354342l48.430012 282.363949c1.336438 7.7935-1.868557 15.667841-8.264221 20.314675-6.399757 4.646833-14.878872 5.257747-21.874193 1.582031L511.726777 802.298666 258.146385 935.614997C255.107165 937.211355 251.789607 938.000324 248.482281 938.000324zM130.422422 431.011454 313.25654 609.228415c4.894474 4.7727 7.128351 11.647271 5.974062 18.385742l-43.163055 251.64532 225.994104-118.811989c6.048763-3.180436 13.282514-3.180436 19.331277 0l225.992057 118.811989-43.163055-251.64532c-1.154289-6.738471 1.079588-13.613042 5.974062-18.385742l182.833095-178.216961-252.665557-36.71418c-6.767124-0.983397-12.614296-5.233188-15.641235-11.362792L511.726777 153.97893 398.729214 382.934482c-3.025916 6.129604-8.874111 10.379395-15.639189 11.362792L130.422422 431.011454z"
                      p-id="3210"
                      fill="#1296db"
                    ></path>
                  </svg>
                </span>
              </span>
            </el-tooltip>
            <span :class="{ 'check-video': isCollect === true }">{{
              video.collectionNumber
            }}</span>
          </div>
        </div>

        <div class="hr">
          <hr />
        </div>

        <div class="info">
          {{ video.info }}
        </div>
      </el-main>

      <el-aside width="300px">
        <video-aside />
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import VideoApi from '@/api/core/VideoDeatil'
import VideoAside from './VideoAside.vue'
import moment from 'moment'
import Cookie from 'js-cookie'
export default {
  components: { VideoAside },
  name: 'VideoDetail',
  data() {
    return {
      flag: false,
      video: {
        width: '960px',
        height: '600px',
        loop: false,
        preload: 'meta',
        videoUrl: null,
        /* 'https://srb-file-2022-03-19.oss-cn-beijing.aliyuncs.com/3d2f3b7a-17da340fece.mp4' */
        playNumber: 0, //播放量
        likeNumber: 0, //点赞数
        collectionNumber: 0, //收藏数
      },

      //喜欢
      isLike: false,
      //收藏
      isCollect: false,
    }
  },

  created() {
    this.getVideo(this.$route.params.id)
  },

  beforeRouteUpdate(to, from, next) {
    this.getVideo(to.params.id)
    next()
  },

  methods: {
    //页面初始化获取数据
    getVideo(id) {
      VideoApi.getVideo(id)
        .then((response) => {
          this.video = response.data.video
          this.checkToken()
        })
        .catch((error) => {
          console.log(error)
        })
    },

    checkToken() {
      let token = Cookie.get('authorization')
      if (token !== null && token !== '' && token.length !== 0 && token) {
        this.checkLike()
        this.checkCoolect()
        this.playAdd()
      }
    },

    //检查是否点赞
    checkLike() {
      VideoApi.checkLike(this.video.id)
        .then((response) => {
          this.isLike = response.data.hasLikeRecords
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //点赞
    like() {
      if (this.isLike) {
        VideoApi.cancelLike(this.video.id)
          .then(() => {
            this.isLike = false
            this.video.likeNumber--
          })
          .catch((error) => {
            this.$message.error(error.message)
          })
      } else {
        VideoApi.like(this.video.id)
          .then(() => {
            this.isLike = true
            this.video.likeNumber++
          })
          .catch(() => {
            this.$message.error('还未登录')
          })
      }
    },

    //检查是否收藏
    checkCoolect() {
      VideoApi.checkCollect(this.video.id)
        .then((response) => {
          this.isCollect = response.data.hasCollectionRecords
        })
        .catch(() => {
          this.$message.error('还未登录')
        })
    },

    //收藏和取消收藏
    collect() {
      if (this.isCollect) {
        VideoApi.cancelCollect(this.video.id)
          .then(() => {
            this.isCollect = false
            this.video.collectionNumber--
          })
          .catch(() => {
            this.$message.error('还未登录')
          })
      } else {
        VideoApi.collect(this.video.id)
          .then(() => {
            this.isCollect = true
            this.video.collectionNumber++
          })
          .catch(() => {
            this.$message.error('还未登录')
          })
      }
    },

    //播放数+1
    playAdd() {
      VideoApi.playAdd(this.video.id)
        .then(() => {})
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //格式化时间
    dateFormat(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },

    giveACue() {
      this.$notify({
        title: '😁',
        message: '该功能正在完善',
        type: 'success',
      })
    },
  },
}
</script>

<style scoped>
.main {
  width: 1200px;
}
.el-main {
  overflow: hidden;
}
.subtitle {
  width: 600px;
  display: flex;
}
.subtitle .left {
  width: 100px;
  display: flex;
  align-items: center;
}
.subtitle .right {
  width: 290px;
  display: flex;
  align-items: center;
}

.subtitle .left .text,
.subtitle .right .text {
  color: #7a8a94d1;
  font-size: 18px;
  margin-bottom: -3px;
}

.hr {
  width: 800px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.video-display {
  display: flex;
  flex-direction: column;
  width: 950px;
}
.video-display .text {
  margin-bottom: 8px;
  font-size: 21px;
  line-height: 29px;
}

.video-item {
  width: 120px;
  height: 45px;
  justify-content: space-between;
  display: flex;
  margin-top: 8px;
}

.video-item .icon {
  display: flex;
  align-items: flex-end;
}
.video-item div:hover {
  box-shadow: #409eff;
}
.info {
  width: 800px;
  height: 100px;
  white-space: pre-line;
}
.check-video {
  color: #409eff;
}
.el-only-child__content {
  margin-top: 50px;
}
</style>
